<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <script src="lib/jquery.min.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <div id="main"></div>
        <script>
            require([
                'echarts',
                'echarts/chart/tree',
                'echarts/component/tooltip'
                ], function (echarts) {
                    var chart = echarts.init(document.getElementById('main'), null, {
                        renderer: 'canvas'
                    });

                    window.onresize = function () {
                        chart.resize();
                    };

                    $.getJSON('./data/ec-option-doc-statistics-201604.json')
                    .done(function (rawData) {

                        function convert(source, target, basePath) {

                            for (var key in source) {
                                var path = key;
                                if (key.match(/^\$/)) {

                                }
                                else {
                                    target.children = target.children || [];
                                    var child = {
                                        name: path
                                    };
                                    target.children.push(child);
                                    convert(source[key], child, path);
                                }
                            }

                            if (!target.children) {
                                target.value = source.$count || 1;
                            }
                        }

                        var data = {name: 'option'};

                        convert(rawData, data, '');

                        chart.setOption({

                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },

                            series:[
                                {
                                    type: 'tree',

                                    data: [data],

                                    top: '2%',
                                    left: '7%',
                                    bottom: '2%',
                                    right: '20%',

                                    symbolSize: 7,

                                    initialTreeDepth: 1,

                                    label: {
                                        normal: {
                                            position: 'left',
                                            verticalAlign: 'middle',
                                            align: 'right'
                                        }
                                    },

                                    leaves: {
                                        label: {
                                            normal: {
                                                position: 'right',
                                                verticalAlign: 'middle',
                                                align: 'left'
                                            }
                                        }
                                    },

                                    expandAndCollapse: true,
                                    animationDuration: 550,
                                    animationDurationUpdate: 750
                                }
                            ]
                        });
                    });
                });
        </script>
    </body>
</html>